<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./动画.css">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    /*209001040 刘浩*/
    @keyframes jump-out {
      from {
        transform: scale(0.7);
      }

      to {
        transform: scale(1);
      }
    }

    .jump-out-enter-active {
      animation: jump-out reverse 2s;
    }

    .jump-out-enter-active {
      animation: jump-out 2s;
    }
  </style>
</head>

<body>
  <div id="app">
    <transition name="jump-out" appear>
      <div class="layout ">
        <div class="container">
          <div class="form">
            <div class="card">
              <div class="content">
                <div class="tabList">
                  <div>
                    <span class="loginText" @click="login" :style="{color:(islogin?'':'#838383')}">登录</span>
                    <span class="register" @click="register" :style="{color:(islogin?'':'black')}">注册</span>
                    <div class="line" :style="{marginLeft:(islogin?'':'80px')}">
                    </div>
                  </div>
                </div>
                <div class="loginInput" v-if="islogin">
                  <form action="">
                    <input type="text" class="input" placeholder="邮箱/手机号码/小米ID" v-model="account" required><br />
                    <span style="color:#ff5c00 ;" v-if="Idinput">手机格式错误</span>
                    <input type="password" class="input password" placeholder="密码" v-model="password" required>
                    <input type="checkbox" class="agree"><span class="agreetext">已阅读并同意小米帐号 <a href="">用户协议</a> 和<a
                        href="">
                        隐私政策</a></span>
                  </form>
                  <button class="loginButton" @click="goLogin">登录</button>
                  <div class="forget">
                    <span>忘记密码？</span>
                    <span>手机号登录</span>
                  </div>
                </div>
                <div class="loginInput" v-if="!islogin">
                  <form action="">
                    <select name="" id="" class="input" v-model="area">
                      <option :value="item.value" v-for="item in countries">{{item.name}}</option>
                    </select>
                    <input type="text" class="input password" placeholder="手机号" required v-model="phone" @blur="blur"
                      ref="phoneRef">
                    <span style="color:#ff5c00 ;" v-if="Verifiedbymobilephone">手机格式错误</span>
                    <div style="display: flex;"> <input type="text" required class="input password VerificationCode"
                        placeholder="请输入验证码" v-model="VerificationCode">
                      <button style="border: none;" ref="btn" class="Sendverificationcode" @click.prevent="sendCode">
                        {{this.time<=0?this.Sendverificationcode:this.time}}< /button>
                    </div>
                    <input type="checkbox" class="agree"><span class="agreetext">已阅读并同意小米帐号 <a href="">用户协议</a> 和<a
                        href="">
                        隐私政策</a></span>
                  </form>
                  <button class="loginButton" @click="goRegister">注册</button>
                  <span class="Fail">收不到验证码？</span>
                  <div class="forget">
                    <span>忘记密码？</span>
                    <span>手机号登录</span>
                  </div>
                </div>
              </div>
              <div class="other">
                <div class="OtherWays">其他方式登录</div>
                <div class="allotherIcon">
                  <span class="otherIcon Alipay"></span>
                  <span class="otherIcon wechat"></span>
                  <span class="otherIcon qq"></span>
                  <span class="otherIcon microblog"></span>
                  <span class="otherIcon apple"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
  </div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          Idinput: false,
          Verifiedbymobilephone: false,
          islogin: true,
          account: '',
          password: "",
          area: "zh",
          Sendverificationcode: "发送验证码",
          phone: "",
          VerificationCode: '',
          time: null,
          countries: [
            { name: '中国', value: "zh" },
            { name: '美国', value: "me" },
            { name: '法国', value: "Fr" },
            { name: '英国', value: "en" },
            { name: '俄罗斯', value: "ra" },
            { name: '德国', value: "ge" },
          ]
        }
      },
      methods: {
        login () {
          this.islogin = true
        },
        register () {
          this.islogin = false
        },
        goLogin () {
          if (this.account === '' || this.password == '') {
            this.Idinput = true
            return
          }
          console.log('账号' + this.account, "密码" + this.password)
        },
        sendCode () {
          this.$refs.btn.disabled = true;
          this.time = 60
          setInterval(() => {
            if (this.time <= 0) {
              this.$refs.btn.disabled = false;
              return
            }
            else {
              this.time--
            }
          }, 1000);
        },
        goRegister () {
          if (this.phone === '' || this.VerificationCode === '') {
          } else {
            console.log('国家' + this.area, '号码' + this.phone, '验证码' + this.VerificationCode)
          }
        },
        blur () {
          let phoneValue = this.$refs.phoneRef.value
          const judgment = /^(?:(?:\+|00)86)?1\d{10}$/
          this.Verifiedbymobilephone = !judgment.test(phoneValue)
        },
      },
    })
    app.mount("#app")    
  </script>
</body>

</html>